<template>
    <div class="my-home-div" v-if="list.length" :style="{ paddingBottom: '12px' }">
        <div class="my-home-div-line"> <i class="icon  icon-ic_fluent_news_16_filled"></i> 活动签到</div>
        <div class="m-0">
            <ul class="list-group">
                <li class="list-group-item d-flex justify-content-between align-items-center" v-for="(v, i) in list"
                    :key="i">
                    <el-link v-if="v?.url" target="_blank" :href="v?.url">
                        {{ v?.name }}
                    </el-link>
                    <span v-else>
                        {{ v?.name }}
                    </span>
                    <el-button class="badge" size="small" @click="submit(v?.ID)" type="primary">签到
                    </el-button>
                </li>
            </ul>
        </div>

    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { asyncsignin, asyncselectusersigninactivity } from '../../../api/'
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import dayjs from 'dayjs'
import isBetween from 'dayjs/plugin/isBetween'
import { ElMessage } from 'element-plus';
dayjs.extend(isBetween)
const p = defineProps<{ user?: Studycodemodel.Iuser }>()
const list = computed(() => {
    return signinactivity.value.filter(z => {
        return !z?.teamsignin?.find(t => t.issignin)
    })
})

const signinactivity = computed(() => {
    return usersigninactivity.value?.map(e => e.signinactivity) || []
})
const usersigninactivity = ref<Studycodemodel.Iusersigninactivity[]>()


onMounted(() => {
    start()
})

async function start() {
    if (p.user) {
        usersigninactivity.value = await asyncselectusersigninactivity()
    } else {
        usersigninactivity.value = []
    }
}

watch(() => p.user, () => {
    start()
})

async function submit(id?: number) {
    await asyncsignin({
        signinactivityid: id,
        issignin: true
    }).then(e => {
        ElMessage.success('签到成功')
    })
    await start()
}

</script>

<style scoped>
.list-group-item {
    border-width: 0;
}
</style>
